<%@page import="cn.jsj.hzu.qm.facecloud.ciuser.pojo.Cilab"%>
<%@page import="cn.jsj.hzu.qm.facecloud.ciuser.pojo.Ciuser"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%
Ciuser ciuser = (Ciuser) request.getSession().getAttribute("ciuser");
if (ciuser == null) {
	response.sendRedirect("../errorPage/toLoginErrorPage.html");
	return;
}

Cilab cilab = (Cilab)request.getAttribute("cilab");
if(cilab == null){
	response.sendError(568, "noCilab");
	return;
}else{
	pageContext.setAttribute("cilab", cilab);
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No Login Data</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login successfully</title>
<link rel="stylesheet" href="../css/style.default.css" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/baseServerLink.js" type="text/javascript"
	charset="utf-8"></script>

<style>
.redAlert {
	color: red;
	animation: twinkle 1s infinite alternate;
}

.greenAlert {
	color: green;
}
</style>
<!-- 表格的样式 -->
<style>
/* td:nth-child(1) {
	text-align: right;
	width: 40%;
}
*/
td:nth-child(2) {
	text-align: left;
	width: 60%;
} 
</style>




<style type="text/css">

.my_green_button {
	background-color: #95f04b;
	border: 0;
	border-radius: 20px;
	-moz-border-radius: 20px;
	/* 老的 Firefox */
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #5c8f30;
	border: 1px solid #6eac3a;
}

td>a{
	color: blue ;
	text-decoration: underline;
}

input{
	height: 25px;
	border: 1px solid #dddddd;
	text-align: center;
	color: dimgray;
}
</style>

<script type="text/javascript">
	/*修改时的加粗和变黑、保存按钮的控制*/
	
	function setSaveAvailable(id){
		jQuery("#nochange_"+id).hide();
		jQuery("#save_"+id).show();
	}

	function setInputBold(id){
		jQuery("#"+id).css("font-weight", "bold");
		jQuery("#"+id).css("color", "black");
	}
	
</script>
<script>
	/*
	<tr class="vartr">
		<td><input type="text" name="" id="" value="50" style="width: 41px; text-align: center;"</td>
		<td><input type="text" name="" id="" value="请输入实验内容文本" style="width: 100%;"/></td>
		<td>2021年7月15日10:19:43</td>
		<td>admin</td>
		<td><a href="javascript:;">修改</a><a href="javascript:;">保存</a></td>
	</tr>
	*/
	function addLine(id, col1, col2, col3, col4){
		var $vartr = jQuery("<tr class=\"vartr\"></tr>");
		
		var $pow = jQuery('<td style="text-align: center;width: 15%;"></td>');
		var $powinput = jQuery('<input type="number" id="pow_'+id+'" value="50" style="width: 41px; text-align: right;">');
		$powinput.val(col1);
		//在抬起键盘时，将字体变黑、加粗
		$powinput.keyup(function(){
			setInputBold("pow_"+id);
			setSaveAvailable(id);
		});
		//在文本改变时，将字体变黑、加粗
		//这是因为，input的type=number时，右边有个向上向下的小箭头，按了之后不触发keyup
		$powinput.change(function(){
			setInputBold("pow_"+id);
			setSaveAvailable(id);
		})
		$pow.append($powinput);
		
		
		
		var $text = jQuery('<td></td>');
		var $textinput = jQuery('<input type="text" id="text_'+id+'" value="请输入实验内容文本" style="width: 100%;"/>');
		$textinput.val(col2);
		//在抬起键盘时，将字体变黑、加粗
		$textinput.keyup(function(){
			setInputBold("text_"+id);
			setSaveAvailable(id);
		});
		$text.append($textinput);
		
		
		
		
		var $edittime = jQuery('<td>'+col3+'</td>');
		var $who = jQuery('<td>'+col4+'</td>');
		var $savetd = jQuery('<td width="15%"></td>');
		var $nochange = jQuery('<a href="javascript:;" style="color: gray;" id="nochange_'+id+'">未修改<br></a>');
		var $save = jQuery('<a href="javascript:;" id="save_'+id+'">保存<br></a>');
		var $delete = jQuery('<a href="javascript:;" id="delete_'+id+'">删除</a>');
		
		$save.click(function(){
			updateCitext(id);
		})
		
		$savetd.append($nochange);
		$savetd.append($save);
		$save.hide();
		$savetd.append($delete);
		
		$delete.click(function(){
			deleteCitext(id);
		});
		
		
		$vartr.append($pow);
		$vartr.append($text);
		$vartr.append($edittime);
		$vartr.append($who);
		$vartr.append($savetd);
		jQuery("#my_tbody").append($vartr);
	}
	
	
	function loadTable(){
		
		$vartr = jQuery(".vartr");
		for (var i = 0; i < $vartr.length; i++) {
			$vartr.remove();
		}
		var d = new Date();
		$.ajax({
			
			/////////////////////////////////////////////jsp///////////
			// url:'../CitextServlet',
			url:'../CitextServlet',
			type:"POST",
			data:{
				'mode':41,
				/////////////////////////////////////////////jsp///////////
				'labid':<%=cilab.getId() %>,
				'd':d.getTime()
			},
			success:function(message){
				console.log(message);
				eval("message = " + message);
				for(var i = 0; i < message.length; i++){
					addLine(
					message[i]['id'],
					message[i]['level'],
					message[i]['text'],
					message[i]['edittime'],
					message[i]['who'],					
					);
					var d = new Date();
					jQuery("#reload_date").text(d);
				}
			},
			error:function(message){
				alert('服务器访问异常\n'+message);
			}
		});
	}
	
	function updateCitext(id){
		
		var d = new Date();
		jQuery.ajax({
			/////////////////////////////////////////////jsp///////////
			// url:'../CitextServlet',
			url:'../CitextServlet',
			type:"POST",
			data:{
				'mode':31,
				/////////////////////////////////////////////jsp///////////
				'id':id,
				'text':jQuery("#text_"+id).val(),
				'level':jQuery("#pow_"+id).val(),
				//JSP
				'who':'<%=ciuser.getName() %>',
				
				'd':d.getTime()
			},
			
			success:function(message){
				console.log(message);
				eval("message="+message);
				if(message['state'] == '1'){
					alert("更新成功");
					loadTable();
				}
				else{
					alert("更新成功发送，但是执行出现问题");
				}
			},
			error:function(message){
				alert('服务器访问异常\n'+message);
			}
		})
	}
	
	function deleteCitext(id){
		var c = confirm("你确定要删除内容为\n    “"+jQuery("#text_"+id).val()+"”\n的记录吗?此操作不可撤销！");
		if(c == true){
			jQuery.ajax({
				/////////////////////////////////////////////jsp///////////
				// url:'../CitextServlet',
				url:'../CitextServlet',
				type:"POST",
				data:{
					'mode':21,
					'id':id
				},
				success:function(message){
					console.log(message);
					eval("message="+message);
					if(message['state'] == '1'){
						alert("删除成功");
						loadTable();
					}
					else{
						alert("命令成功发送，但是执行出现问题");
					}
				},
				error:function(message){
					alert('服务器访问异常\n'+message);
				}
					
			});
		}
		else{
			alert("操作已取消，没有操作被进行。");
		}
	}
	
	jQuery(function(){
		loadTable();
	});
</script>
</head>

<body>
	<div class="bodywrapper" id="my_title">
		<div class="topheader orangeborderbottom5">
			<div class="left">
				<h1 class="logo">
					签到<span>系统</span>
				</h1>



				<br clear="all" />

			</div>
			<!--left-->

			<div class="right">

				<!--userdata-->
			</div>
			<!--userinfodrop-->
		</div>
		<!--right-->
	</div>
	<!--topheader-->

	<div class="" style="">
		<div class="contentwrapper padding10"
			style="margin: 0 auto; width: 80%; text-align: center;">
			<div class="errorwrapper error403" style="">
				<div class="errorcontent">
					<br />
					<h1>实验室安全检查单</h1>
					<h3>当前实验室</h3>
					<br>
					<h2><%=cilab.getName() %></h2>
					<br/>
					<div style="text-align: right;">
						<button id="button_new" type="button" class="my_green_button">
							<span style="line-height: 30px;">
								<span style="color: white; font-size: larger;">
									&nbsp;&nbsp;(+)
								</span>
								新增记录&nbsp;&nbsp;
							</span>
						</button>
						
						<button id="no_new" type="button" class="my_green_button" style="background-color: orangered; display: none;">
							<span style="line-height: 30px;">
								<span style="color: white; font-size: larger;">
									&nbsp;&nbsp;(x) 
								</span>
								<span style="color: white;">取消新增&nbsp;&nbsp;</span>
							</span>
						</button>
						<a id="reload" href="javaScript:;" class="btn btn2 btn_blue btn_search radius50">
							<span>重新查询列表</span>
						</a>
					</div>
					
					
					
					<script type="text/javascript">
						jQuery(function(){
							//刷新事件
							jQuery(function(){
								jQuery("#reload").click(function(){
									loadTable();
								});
							});
							
							//关于新增条目的展示和隐藏
							jQuery("#button_new").show();
							jQuery("#table_now").show();
							jQuery("#table_new").hide();
							jQuery("#no_new").hide();
							
							
							jQuery("#button_new").click(function(){
								jQuery("#button_new").hide();
								// jQuery("#table_now").hide();
								jQuery("#table_new").show();
								jQuery("#no_new").show();
							})
							
							jQuery("#no_new").click(function(){
								jQuery("#button_new").show();
								jQuery("#table_now").show();
								jQuery("#table_new").hide();
								jQuery("#no_new").hide();
								loadTable();
							})
						});
						
					</script>
					<table cellpadding="0" cellspacing="0" border="0" class="stdtable" style="text-align: center;" id="table_new">
						<colgroup>
							<col class="con0" />
							<col class="con1" />
						</colgroup>
						<thead>
							<tr>
								<th class="head1" style="text-align: center; background-color: palegreen;">新增记录</th>
								<th class="head0" style="text-align: center; background-color: palegreen;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr >
								<td>
									<input type="text" id="text_new" placeholder="请输入检查记录" style="width: 100%;"/>
								</td>
								
								<td style="width: 15%; text-align: center;"><a href="javascript:;" id="save_add" style=>提交</a></td>
							</tr>
					
						</tbody>
						
						
					</table>
					<div style="text-align: left;">
						(此表数据最后一次刷新于：<span id="reload_date">-</span>)
					</div>
					<table cellpadding="0" cellspacing="0" border="0" class="stdtable" style="text-align: center;" id="table_now">
						<colgroup>
							<col class="con0" />
							<col class="con1" />
							<col class="con0" />
							<col class="con1" />
							<col class="con0" />
						</colgroup>
						<thead>
							<tr>
								<th class="head0" style="text-align: center;">日期</th>
								<th class="head1" style="text-align: center;">实验室检查记录</th>
								<th class="head0" style="text-align: center;">负责人</th>
							</tr>
						</thead>
						<tbody id="my_tbody">
							<tr class="vartr">
								<td>2021年7月15日10:19:43</td>
								<td style="text-align: center;">检查记录</td>
								<td>负责人</td>
								
							</tr>
					
							<tr class="vartr">
								<td style="text-align: center;"> 李四 </td>
								<td>789@qq.com</td>
								<td>8</td>
							</tr>
						</tbody>
					</table>
					
					
					
					<script type="text/javascript">
						jQuery(function(){
							jQuery("#save_add").click(function(){
								jQuery.ajax({
									//jsp
									url:"../CitextServlet",
									type:"POST",
									data:{
										'mode':11,
										'text':jQuery("#text_new").val(),
										'level':jQuery("#pow_new").val(),
										//jsp
										'who':'<%=ciuser.getName()%>',
										//jsp
										'labid':<%=cilab.getId()%>,
									},
									success:function(message){
										console.log(message);
										eval("message="+message);
										
										if(message['state'] == '1'){
											alert('新增成功');
											jQuery("#no_new").click();
										}else{
											alert("请求已发送，但执行出现问题");
										}
									},
									error:function(message){
										console.log(message);
										alert("服务器访问异常"+message);
									}
								});
							});
						});
					</script>
				</div>
				<!--errorcontent-->
			</div>
			<!--errorwrapper-->
		</div>

	</div>


	<!--bodywrapper-->
</body>
</html>
